<template>
  <div>
    <navTop></navTop>
    <p @click="showChangePsw" class="btn1">
      修改登录密码
      <i class="iconfont icon-jiantou-copy"></i>
    </p>
    <van-dialog
      v-model="showPsw"
      title
      show-cancel-button
      confirmButtonColor="rgb(184,28,34)"
      @cancel="cancel"
      @confirm="confirm"
    >
      <ul>
        <li>
          原密码：
          <input
            placeholder="请输入原密码"
            :class="{password:true,err:!check1}"
            v-model="password1"
            type="password"
            @blur="checkOldPsw"
          />
        </li>
        <span :class="{err:!check1}">{{!check1?place1:''}}</span>
        <li>
          新密码：
          <input
            placeholder="6-18位数字字母，不能纯数字"
            :class="{password:true,err:!check2}"
            v-model="password2"
            type="password"
            @blur="checkPsw"
          />
        </li>
        <span :class="{err:!check2}">{{!check2?place2:''}}</span>
        <li>
          重复密码：
          <input
            placeholder="请输入重复密码"
            :class="{password:true,err:!check3}"
            v-model="password3"
            type="password"
            @blur="checkRepeat"
          />
        </li>
        <span :class="{err:!check3}">{{!check3?place3:''}}</span>
      </ul>
    </van-dialog>
    <p @click="showaddress()" class="btn1">
      添加地址信息
      <i class="iconfont icon-jiantou-copy"></i>
    </p>
    <van-dialog
      v-model="showAddRess"
      title
      show-cancel-button
      confirmButtonColor="rgb(184,28,34)"
      @cancel="cancel"
      @confirm="addAddRess"
    >
      <ul>
        <li>
          收货号码：
          <input @blur="checkPhoneNum" class="password" v-model="phoneNum" type="number" />
        </li>
        <span :class="{err:!check4}">{{!check4?place4:''}}</span>
        <li>
          地址：
          <input class="password" v-model="address" type="text" />
        </li>
        <!-- <span :class="{err:!check1}">{{!check1?place1:''}}</span> -->
      </ul>
    </van-dialog>
    <p @click="logOut" class="btn2">退出账号</p>
  </div>
</template>

<script>
import editPsw from "@/api/editPassword.js";
import navTop from "@/components/common/navTop.vue";
export default {
  data() {
    return {
      address: "",
      phoneNum: "",
      showAddRess: false,
      showPsw: false,
      password1: "",
      password2: "",
      password3: "",
      place1: "",
      place2: "",
      place3: "",
      place4: "",
      check1: true,
      check2: true,
      check3: true,
      check4: true
    };
  },

  components: {
    navTop
  },

  methods: {
    checkPhoneNum() {
      if (/^1\d{10}$/.test(this.phoneNum)) {
        this.check4 = true;
        this.place4 = "";
      } else {
        this.check4 = false;
        this.place4 = "请输入正确的手机号码";
      }
    },
    addAddRess() {
      if (this.check4) {
        let addressObj = {
          username: this.$store.state.user.username,
          phonenum: this.phoneNum,
          address: this.address
        };
        this.$store.dispatch("setaddress", addressObj);
        this.check4 = true;
        this.place4 = "";
        this.phoneNum = "";
        this.address = "";
        this.$toast.success("添加成功");
      } else {
        this.$toast.fail("添加失败");
      }
    },
    showaddress() {
      this.showAddRess = !this.showAddRess;
    },
    showChangePsw() {
      this.showPsw = !this.showPsw;
    },
    async checkOldPsw() {
      if (this.password1) {
        let p = await editPsw.checkOldPsw(
          this.$store.state.user.username,
          this.password1
        );
        if (p.data.flag) {
          this.check1 = true;
        } else {
          this.check1 = false;
          this.place1 = "原密码不正确";
        }
      } else {
        this.check1 = false;
        this.place1 = "密码不能为空";
      }
    },
    checkPsw() {
      let check = /^(?!\d+$)[\da-zA-Z]{6,18}$/.test(this.password2);
      if (this.password2) {
        if (check) {
          this.check2 = true;
        } else {
          this.check2 = false;
          this.place2 = "密码格式不正确";
        }
      } else {
        this.check2 = false;
        this.place2 = "密码不能为空";
      }
    },
    checkRepeat() {
      if (this.check2) {
        if (this.password3) {
          if (this.password2 == this.password3) {
            this.check3 = true;
          } else {
            this.check3 = false;
            this.place3 = "密码不一致";
          }
        } else {
          this.check3 = false;
          this.place3 = "密码不能为空";
        }
      }
    },
    async confirm() {
      if (this.check2 && this.check3) {
        let p = await editPsw.editPsw(
          this.$store.state.user.username,
          this.password3
        );
        if (p.data.flag) {
          this.$toast.success("修改成功");
        } else {
          this.$toast.fail("修改失败");
        }
      } else {
        this.$toast.fail("修改失败");
      }
      this.password1 = "";
      this.password2 = "";
      this.password3 = "";
      this.check2 = true;
      this.check3 = true;
    },
    cancel() {
      this.password1 = "";
      this.password2 = "";
      this.password3 = "";
      this.phoneNum = "";
      this.check2 = true;
      this.check3 = true;
    },
    logOut() {
      this.$dialog
        .confirm({
          message: "确定要退出账号吗？"
        })
        .then(async () => {
          try {
        let p = await this.$store.dispatch("logOut");
        if (p.flag) {
          this.$router.push("/my/MyTab/login");
        } else {
          this.$toast.fail('退出失败');
        }
      } catch (err) {
        this.$toast.fail(err+"");
      }
        })
        .catch(() => {
        });
      
    }
  }
};
</script>

<style lang="scss" scoped>
div {
  padding: 0 6% 0;
}
p {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background: rgb(250, 250, 250);
  margin: 16px 0 16px 0;
}
.btn1 {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 0;
}
.btn2 {
  margin-top: 40px;
  border: 1px solid rgb(238, 238, 238);
}
.van-dialog {
  padding: 10px 20px 0 20px;
  text-align: left;
  li {
    font-size: 16px;
    border-bottom: 1px solid rgb(207, 207, 207);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  .password {
    width: 70%;
    height: 40px;
    font-size: 14px;
  }
}
.err {
  border-color: rgb(184, 28, 34) !important;
  color: rgb(184, 28, 34) !important;
}
span {
  font-size: 12px;
}
</style>